<template>
  <div>{{person}}</div>
  <button @click="updateAgeInfo()">更改年龄</button>
  <button @click="updateHealthInfo()">更改健康值</button>
</template>
<!-- 
  1、watch监听单个ref变量
  2、watch监听多个ref变量
  3、watch监听reacitve对象
  4、watch监听reactive对象中的属性
  5、watchEffect方法使用
 -->
<script lang='ts'>
import {ref,reactive,watch,computed,watchEffect} from 'vue'
import {IPerson} from './types'
export default{
 setup(){
  let person=reactive<IPerson>({idcard:610122198404083333,name:'Giles',age:33,gender:1,job:'teacher',health:60})
  const updateAgeInfo:()=>void=()=>{
    person.age++
  }
  const updateHealthInfo:()=>void=()=>{
    person.health+=5
  }
  /* 
    监听reactive对象的语法
    watch(对象名,(新值,旧值)=>{},{})
  */
  let newPerson=computed(()=>JSON.parse(JSON.stringify(person)))
  watch(newPerson,(newval:number,oldval:number)=>{
    //console.log('新值:',newval);
    //console.log('旧值:',oldval);
  })
  /**
   * watch监听reactive对象中的某个属性
   * watch(()=>reactive对象.属性,()=>{},{})
   */
  watch(()=>person.age,(newval:number,oldval:number)=>{
    //console.log('新值:',newval);
    //console.log('旧值:',oldval);
  })
  watchEffect(()=>{
    person.age
    person.health
    console.log('-----------执行watchEffect-------------');
  })
  return{
    person,
    updateAgeInfo,
    updateHealthInfo
  }
 }
}
</script>

<style lang='scss' scoped>
</style>